import { getAllHeroes } from '@/lib/data';
import { useState } from 'react';
import Link from 'next/link';
import Image from 'next/image';

// 获取英雄数据
const heroes = getAllHeroes();

// 英雄角色类型
const roleTypes = ["全部", "战士", "法师", "坦克", "刺客", "射手", "辅助"];

export default function HeroesPage() {
  const [selectedRole, setSelectedRole] = useState("全部");
  
  // 根据选择的角色筛选英雄
  const filteredHeroes = selectedRole === "全部" 
    ? heroes 
    : heroes.filter(hero => hero.roles.includes(selectedRole));

  return (
    <div className="space-y-8">
      <div className="flex justify-between items-center">
        <h1 className="text-3xl font-bold">英雄资料库</h1>
        <div className="flex space-x-2">
          {roleTypes.map(role => (
            <button
              key={role}
              onClick={() => setSelectedRole(role)}
              className={`px-4 py-2 rounded-lg ${
                selectedRole === role
                  ? 'bg-blue-600 text-white'
                  : 'bg-gray-200 text-gray-800 hover:bg-gray-300'
              }`}
            >
              {role}
            </button>
          ))}
        </div>
      </div>

      <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
        {filteredHeroes.map(hero => (
          <Link href={`/heroes/${hero.id}`} key={hero.id} className="block">
            <div className="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow">
              <div className="relative h-40 bg-gray-200">
                {/* 实际项目中会替换为真实图片 */}
                <div className="absolute inset-0 flex items-center justify-center bg-gray-300">
                  <span className="text-gray-600">{hero.name}头像</span>
                </div>
              </div>
              <div className="p-4">
                <h3 className="font-bold text-lg">{hero.name}</h3>
                <p className="text-sm text-gray-600">{hero.title}</p>
                <div className="mt-2 flex flex-wrap gap-1">
                  {hero.roles.map(role => (
                    <span key={role} className="px-2 py-1 text-xs bg-blue-100 text-blue-800 rounded">
                      {role}
                    </span>
                  ))}
                </div>
              </div>
            </div>
          </Link>
        ))}
      </div>
    </div>
  );
}
